<template>
    <el-table :data="this.roles" style="width: 100%">
        <el-table-column prop="name" label="角色名" width="180" />
        <el-table-column prop="permissions" label="权限" width="180" />
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button link type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>

        <!-- 有问题！！！待解决 -->
        <!-- <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column> -->
    </el-table>
</template>
  
<script lang="ts" setup>
interface role{
    name: string
    permissions: number
}

const props = defineProps(['roles'])

const handleEdit = (index: number, row: role) => {
  alert(row.name)
}
const handleDelete = (index: number, row: role) => {
  alert(row.name)
}

</script>
  